import React, { memo, useEffect, useRef, useState } from "react";
import { getTodo, addTodo, delTodo, WriteTodo } from "../api/todo";
import { Popup } from "react-vant";
const todo = memo(() => {
  const [todo, setTodo] = useState([]);
  const [value, setValue] = useState("");
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");
  const [value3, setValue3] = useState("");
  const [id,setID] = useState('')
  const refname = useRef();
  const refScore = useRef();
  const [visible, setVisible] = useState(false);
  //初始化todo数组
  let initTodo = async () => {
    let res = await getTodo();
    console.log(res.data);
    setTodo(res.data);
  };
  useEffect(() => {
    initTodo();
  }, []);
  return (
    <div>
      <table border={"1px"}>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>成绩</th>
            <th>操作</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {todo.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.sex}</td>
              <td>{item.score}</td>
              <td
                onClick={async () => {
                await delTodo(item.id).then(()=>{initTodo()})
                }}
              >
                删除
              </td>
              <td
                onClick={()=>{setVisible(true);setID(item.id);initTodo()}}
              >
                修改
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <input
        type="text"
        placeholder="请输入学生姓名"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <input
        type="text"
        placeholder="请输入学生性别"
        value={value1}
        onChange={(e) => {
          setValue1(e.target.value);
        }}
      />
      <input
        type="text"
        placeholder="请输入学生年龄"
        value={value2}
        onChange={(e) => {
          setValue2(e.target.value);
        }}
      />
      <input
        type="text"
        placeholder="请输入学生成绩"
        value={value3}
        onChange={(e) => {
          setValue3(e.target.value);
        }}
      />
      <br />
      <button
        onClick={async () => {
          await addTodo({
            name: value,
            sex: value1,
            age: value2,
            score: value3,
            id: Date.now(),
            key: Date.now(),
          });
          initTodo()
        }}
      >
        点击添加学生信息
      </button>
      <Popup visible={visible} onClose={() => setVisible(false)}  position='bottom'>
        <div style={{ padding: "30px 50px" }}>
          <input type="text" ref={refname} />
          <input type="text" ref={refScore} />
          <br />
          <button  onClick={async () => {
                  await WriteTodo(id,{
                    name: refname.current.value,
                    score: refScore.current.value,
                  });
                  setVisible(false)
                  initTodo()
                }}>确定</button>
          <button onClick={()=>{setVisible(false)}}>取消</button>
        </div>
      </Popup>
    </div>
  );
});

export default todo;
